<template>
	<view class="wrap">

		<view style="background-color: #fff;">
			<!-- 搜索框 -->
			<view class="serach-wrap">
				<u-search shape="square" v-model="keywords" bgColor="#F5F5F5" placeholder="请输入门店名称"
					placeholderColor="#CDCDCD" :showAction="false" @search="doSearch(keywords)" @change="inputchange"></u-search>
			</view>
		</view>

		<view style="background-color: #FFFFFF; position: sticky; top: 0;z-index: 2;">

			<u-tabs-swiper :list="tabs" ref="tabs" :current="current" keyName="name" :is-scroll="false" @change="change"
				activeColor="#F83C57" inactiveColor="#606266" bold="false">
			</u-tabs-swiper>

			<!-- 
		 :activeItemStyle="{
		 		  color:'#20C3AA',
		 		  fontWeight:'bold',
		 		  transform:'scal(1.05)'
		 	  }" :style="{
		 		  color:'#606266',
		 		  transform:'scal(1)'
		 	  }"-->

		</view>




		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(0)">
					<view v-if="!isNotLogin">
						<view v-if="storeListHistory.length > 0">
							<view v-for="(item, index) in storeListHistory" :key="index" style="margin: 20upx 24upx 0;"
								@click="onclick(item)">
								<view>
									<StoreCard :isLocation="item.storeId == storeInfo.storeId" :storeName="item.storeName"
										:storeAddress="item.contactAddress" :distance="item.distanceDesc"
										:phone="item.contactTel" :latitude="item.latitude" :longitude="item.longitude">
									</StoreCard>
								</view>
							</view>
							<u-loadmore :status="loadStatus[0]" @loadmore="reachBottom(0)"></u-loadmore>
						</view>
						
						<no-data v-if="storeListHistory.length === 0"></no-data>
					</view>
					
					<view v-else>
						<nologin></nologin>
					</view>

				</scroll-view>
			</swiper-item>

			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(1)">
					<view class="page-box" v-if="storeList.length > 0">

						<view v-for="(item, index) in storeList" :key="index" style="margin: 20upx 24upx 0;"
							@click="onclick(item)">
							<view>
								<StoreCard :isLocation="item.storeId == storeInfo.storeId" :storeName="item.storeName"
						  	:storeAddress="item.contactAddress" :distance="item.distanceDesc"
									:phone="item.contactTel" :latitude="item.latitude" :longitude="item.longitude">
								</StoreCard>
							</view>
						</view>

						<u-loadmore :status="loadStatus[1]" @loadmore="reachBottom(1)"></u-loadmore>
					</view>

					<no-data v-if="storeList.length === 0"></no-data>

				</scroll-view>
			</swiper-item>

		</swiper>






		<!-- 登录弹窗 -->
		<LoginMask></LoginMask>
	</view>
</template>

<script>
	import storeCell from '@/components/coupon/store-cell.vue'
	import StoreCard from '@/components/card/store-card.vue';
	import * as loginApi from '@/common/apis/login-api';
	import LoginMask from '@/components/layout/login-mask.vue';
	import nologin from '@/components/layout/nologin.vue';

	export default {
		components: {
			storeCell,
			StoreCard,
			LoginMask,
			nologin
		},
		data() {
			return {
				pageNo: 1,
				pageNoHistory: 1,
				latitude: '',
				longitude: '',
				storeList: [],
				storeListHistory: [],
				tabs: [{
						name: '历史门店'
					},
					{
						name: '附近门店'
					}
				],
				current: 1,
				swiperCurrent: 1,
				keywords:'',
				loadStatus: ['loadmore', 'loadmore'],
			}
		},
		computed: {
			openid() {
				return this.$store.state.user.openid;
			},
			storeInfo() {
				return this.$store.state.app.storeInfo;
			},
			isNotLogin() {
				return uni.$u.test.isEmpty(this.$store.state.user.userInfo);
			}
		},
		onLoad(op) {
			this.getLocation();
			
			uni.$on('login', res=>{
				console.log('登录成功，请求历史记录');
				
				uni.$u.throttle(this.getStoreHistory, 1000);
				// this.getStoreHistory();
			})
		},

		methods: {
			
			doSearch(){
				this.pageNo = 1;
				this.pageNoHistory = 1;
				this.getStore();
				this.getStoreHistory();
			},

			// tab栏切换
			change(index) {
				this.swiperCurrent = index;

				// if (uni.$u.test.isEmpty(this.messageList)) {
				// 	if (index == 1) {
				// 		this.pageNo = this.readPageNo;
				// 		this.type = '2';
				// 		this.getData();
				// 	}
				// }
			},

			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},

			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},

			inputchange(value){
				console.log('输入框的值', value);
				console.log('输入框的值keywords', this.keywords);
				
				uni.$u.debounce(this.doSearch, 1500);
				
			},

			//获取定位信息
			getLocation() {
				let that = this;

				uni.getLocation({
					type: 'wgs84',
					success: (res => {
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.pageNo = 1;
						that.pageNoHistory = 1;
						that.getStore();
						that.getStoreHistory();
					}),

					fail: (e) => {
						console.log('定位失败', e);
						// 定位权限未开启，引导设置
						uni.showModal({
							title: '温馨提示',
							content: '您已拒绝定位,请开启',
							confirmText: '去设置',
							success(res) {

								if (res.confirm) {
									//打开授权设置
									uni.openSetting({
										success: (re) => {
											if (re.authSetting['scope.userLocation']) {
												uni.getLocation({
													type: 'wgs84',
													success: (res_ => {
														// console.log('当前位置的经度：' + res.longitude);
														// console.log('当前位置的纬度：' + res.latitude);
														that.latitude =
															res_.latitude;
														that.longitude =
															res_.longitude;
														that.pageNo = 1;
														that.pageNoHistory = 1;
														that.getStore();
														that.getStoreHistory();
													}),
												})
											} else {
												console.log('没有打开定位');
												that.pageNo = 1;
												that.pageNoHistory = 1;
												that.getStore();
												that.getStoreHistory();
											}
										},
									})
								} else if (res.cancel) {
									console.log('点击了取消');
									that.pageNo = 1;
									that.pageNoHistory = 1;
									that.getStore();
									that.getStoreHistory();
								}
							},

						})
					}

				});
			},

			getStore() {
				loginApi.storelist({
					pageNo: this.pageNo,
					pageSize: 10,
					longitude: this.longitude,
					latitude: this.latitude,
					keywords: this.keywords,
				}).then(res => {
					// this.storeList = res;
					
					if (this.pageNo == 1) {
						this.storeList = [];
						this.pageNo++;
					
						this.loadStatus[1] = 'loadmore';
					
					} else {
						if (!uni.$u.test.isEmpty(res)) {
							this.pageNo++;
					
							this.loadStatus[1] = 'loadmore';
						} else {
							this.loadStatus[1] = 'nomore';
						}
					}
					
					this.storeList = this.storeList.concat(res);
					
				})
			},

			getStoreHistory() {
				
				console.log('历史记录开始……');
				
				if(this.isNotLogin){
					return
				}
				
				loginApi.history({
					pageNo: this.pageNoHistory,
					pageSize: 10,
					longitude: this.longitude,
					latitude: this.latitude,
					keywords: this.keywords,
				}).then(res => {
					// this.storeListHistory = res;
					
					if (this.pageNoHistory == 1) {
						this.storeListHistory = [];
						this.pageNoHistory++;
					
						this.loadStatus[0] = 'loadmore';
					
					} else {
						if (!uni.$u.test.isEmpty(res)) {
							this.pageNoHistory++;
					
							this.loadStatus[0] = 'loadmore';
						} else {
							this.loadStatus[0] = 'nomore';
						}
					}
					
					this.storeListHistory = this.storeListHistory.concat(res);
				})
			},
			
			
			reachBottom(type) {
				this.loadStatus[type] = 'loading';
			
				switch (type) {
					case 0:
						this.getStoreHistory();
						break;
					case 1:
						this.getStore();
						break;
				}
			},

			onclick(item) {
				
				this.$store.commit('user/savedeptId', item.storeId);
				this.$store.commit('app/setStoreInfo', item);
				uni.setStorageSync('deptId', item.storeId);
				uni.$emit('store_selected', true);		
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		// padding: 10upx 25upx;
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	 .serach-wrap {
		margin: 24upx 45upx 0;
		background: #F5F5F5;
		border-radius: 8upx;
	}

	.swiper-box {
		flex-grow: 1;
	}

	.swiper-item {
		height: 100%;
	}
</style>
